<script>
    const noop = function () {}
    export default {
        name: 'zPage',
        props: {
            total: Number,
            simple: Boolean,
            current: Number,
            placement: String,
            'page-size-opts': {
                type: Array,
                default: function () {
                    return [10, 20, 30, 40]
                }
            }
        },
        render: function (h, context) {
            var props = context.props
            var classes = context.data.staticClass
            var style = context.data.staticStyle
            var onChangeHandler = context.listeners['on-change'] || noop
            var onPageSizeChangeHandler = context.listeners['on-page-size-change'] || noop
            var _placement = 'top'
            if (props.simple) {
                return (
                    <page
                        class={classes}
                        style={style}
                        current={props.current}
                        total={props.total}
                        page-size-opts={props.pageSizeOpts}
                        on-on-change={(page)=>onChangeHandler(page)}
                        on-on-page-size-change={(size)=>onPageSizeChangeHandler(size)}
                        placement={props.placement || _placement}
                        simple>
                    </page>
                )
            } else {
                return (
                    <page
                        class={classes}
                        style={style}
                        current={props.current}
                        total={props.total}
                        page-size-opts={props.pageSizeOpts}
                        on-on-change={(page)=>onChangeHandler(page)}
                        on-on-page-size-change={(size)=>onPageSizeChangeHandler(size)}
                        placement={props.placement || _placement}
                        size="small"
                        show-sizer
                        show-elevator
                        show-total>
                    </page>
                )
            }
        },
        functional: true
    }
</script>
